<%-- 
    Document   : productshow
    Created on : 2014-3-14, 10:44:50
    Author     : lcfgly
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page trimDirectiveWhitespaces="true" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">

        <title>产品详细</title>

        <meta name="description" content="产品详细">
        <meta name="author" content="pixelcave">
        <meta name="robots" content="noindex, nofollow">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">
        <%@include file="/WEB-INF/jspf/css.jspf" %>
    </head>

    <body>
        <div id="page-container" class="full-width">
            <header class="navbar navbar-inverse">
                <!-- Navbar Inner -->
                <%@include file="/WEB-INF/jspf/header.jspf" %>
                <!-- END Navbar Inner -->
            </header>
            <!-- END Header -->
            <!-- Left Sidebar -->
            <jsp:include page="/control/left.html" flush="true" />
            <!-- END Left Sidebar -->
            <!-- Pre Page Content -->
            <div id="pre-page-content" style="min-height: 20px">
                <h1><i class="glyphicon-shopping_cart" style="line-height: 40px"></i> ${product.title}报价</h1>
            </div>
            <!-- END Pre Page Content -->

            <!-- Page Content -->
            <div id="page-content">
                <!-- Breadcrumb -->
                <!-- You can have the breadcrumb stick on scrolling just by adding the following attributes with their values (data-spy="affix" data-offset-top="250") -->
                <!-- You can try it on other elements too :-), the sticky position and style can be adjusted in the css/main.css with .affix class -->
                <ul class="breadcrumb" data-spy="affix" data-offset-top="250">
                    <li>
                        <a href="<c:url value="/control/index.html" />"><i class="glyphicon-display"></i></a> <span class="divider"><i class="icon-angle-right"></i></span>
                    </li>
                    <li>
                        <a href="<c:url value="/control/product/${product.typeid}.html" />">${type.name}报价</a> <span class="divider"><i class="icon-angle-right"></i></span>
                    </li>
                    <li class="active"><a href="">${product.title}报价</a></li>
                </ul>
                <!-- END Breadcrumb -->

                <!-- User Profile Block -->
                <div class="block block-themed">
                    <!-- User Profile Title -->
                    <div class="block-title">
                        <h4>产品信息</h4>
                    </div>
                    <!-- END User Profile Title -->

                    <!-- User Profile Content -->
                    <div class="block-content">
                        <!-- User Profile Content -->
                        <div class="row-fluid">
                            <!-- First Column -->
                            <div class="span3">
                                <!-- Avatar -->
                                <div class="block-section text-center">
                                    <c:if test="${empty price.priceimg}">
                                        <img src="${product.litpic}" style="border-radius:10px" alt="${product.title}">
                                    </c:if>
                                     <c:if test="${!empty price.priceimg}">
                                            <img src="${price.priceimg}" style="border-radius:10px" alt="${product.title}">
                                    </c:if>
                                </div>
                                <!-- END Avatar -->

                                <!-- Social -->
                                <ul class="nav nav-tabs nav-stacked">
                                    <li><a href="/product/${product.addtable}/${product.id}.html"><i class="icon-github"></i> 产品首页</a></li>
                                    <li><a href="javascript:window.opener=null;window.open('','_self');window.close();"><i class="icon-github"></i> 返回</a></li>
                                    <li><a href="#showimgbox"  data-toggle="modal"><i class="icon-picture"></i> 选择产品图片</a></li>
                                </ul>
                                <!-- END Social -->
                            </div>
                            <!-- END First Column -->

                            <!-- Second Column -->
                            <div class="span9">
                                <h4>${product.title}</h4>
                                <blockquote>
                                    <p>推荐价格</p>
                                    <span style="color:red;margin-left: 30px"> ${product.price} </span>
                                </blockquote>
                                <blockquote>
                                    <p>您的报价</p>
                                    <div class="input-prepend" style="margin-top:5px">
                                        <span class="add-on"><i class="icon-shopping-cart"></i></span>
                                        <input type="text"  id="price" value="${price.price}" >
                                        <input type="hidden" id="priceimg" value="${price.priceimg}" />
                                        <a style="padding:4px 12px;margin-left: 5px" class="btn btn-large btn-success" href="javascript:void(0)" id="pricepost"><i class="icon-ok-sign"></i> 提交</a>
                                    </div>
                                    <div id="load" class="hidden" style="margin-left: 30px">
                                        <i class="icon-spinner icon-spin icon-4x text-success"></i>
                                    </div>
                                </blockquote>
                                <h4>属性</h4>
                                <ul class="icons-ul list">
                                    <c:forEach var="item" items="${productproperty}" >
                                        <c:if test="${item.tablename != 'body' }">
                                            <li>
                                                <i class="icon-li icon-ok text-success"></i> <strong>${item.name}</strong><br><em>&nbsp;&nbsp;&nbsp;&nbsp;${product[item.tablename]}</em>
                                            </li>
                                        </c:if>
                                    </c:forEach>
                                </ul>
                            </div>
                            <!-- END Second Column -->
                        </div>
                        <!-- END User Profile Content -->
                    </div>
                    <!-- END User Profile Content -->
                </div>
                <!-- END User Profile Block -->

                <div class="block block-themed block-last" >
                    <!-- Latest Uploaded Projects Title -->
                    <div class="block-title">
                        <h4><i class="icon-cloud-upload"></i> 产品图片展示</h4>
                    </div>
                    <!-- END Latest Uploaded Projects Title -->

                    <!-- Latest Uploaded Projects Content -->
                    <div class="block-content">
                        <div data-toggle="lightbox-gallery" class="gallery">
                            <div class="row-fluid row-items">
                                <c:forEach var="item" items="${productimgs}">
                                    <div class="span2">
                                        <a class="gallery-link" href="${item.imgurl}">
                                            <img alt="image" src="${item.thumb}">
                                        </a>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                    <!-- END Latest Uploaded Projects Content -->
                </div>


            </div>
            <!-- END Page Content -->

            <!-- Footer -->
            <%@include file="/WEB-INF/jspf/footer.jspf" %>
            <!-- END Footer -->
        </div>
        <!--图片选择对话框-->
        <div class="modal hide fade" id="showimgbox" data-backdrop="static" >
            <div class="modal-header">
                <h3>[<span style="color:red;">必须</span>]选择产品图(点击图片即可)</h3>
            </div>
            <div class="modal-body">
                <div class="row-fluid row-items">
                    <c:forEach var="item" items="${productimgs}">
                        <div class="span4">
                            <a href="${item.imgurl}" class="gallery-link">
                                <img src="${item.thumb}" alt="image">
                            </a>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
        <!--图片选择对话框-->
        <a href="#" id="to-top"><i class="icon-chevron-up"></i>
            <%@include file="/WEB-INF/jspf/js.jspf" %>
            <script>
                $(".gallery-link").click(function() {
                                $("#priceimg").val($(this).attr("href"));
                                $("#showimgbox").modal('hide');
                                return false;
                            });
                $('#pricepost').click(function() {
                    var as = $(this);
                    $(this).parent("div").addClass("hidden");
                    $("#load").removeClass("hidden");
                    var re = /^[0-9]+.?[0-9]*$/;
                    var price = $("#price").val();
                    if (!re.test(price)) {
                        $(this).parent("div").removeClass("hidden");
                        $("#load").addClass("hidden");
                        alert("请输入正确的价格");
                    } else {
                        var img = $("#priceimg").val();
                        if (img == "") {
                            $("#showimgbox").modal('show');
                            $(".gallery-link").click(function() {
                                $("#priceimg").val($(this).attr("href"));
                                $('#pricepost').click();
                                $("#showimgbox").modal('hide');
                                return false;
                            });
                        }else{
                            $.post("<c:url value="/control/pricepost/${product.typeid}/${product.id}.html" />", {
                                price: price,
                                priceimg:$("#priceimg").val()
                            }, function(data, status) {
                                if (data) {
                                    as.parent("div").removeClass("hidden");
                                    $("#load").addClass("hidden");
                                    alert("提交成功");
                                } else {
                                    as.parent("div").removeClass("hidden");
                                    $("#load").addClass("hidden");
                                    alert("提交失败");
                                }
                            }, "json");
                        }
                    }
                });
            </script>
    </body>
</html>